<template>
	<view class="">
		<view class="ticketlrer" :style="{position:headerPosition,top:headerTop}">
			<sl-filter :themeColor="themeColor" :menuList="menuList" :isTransNav="true"  @result="result"></sl-filter>
		</view>
		<view class="orderList">
			<view class="orderExamine" @click="nalixt">
				<view class="examineDai">
					<view class="mineImg">
						<!-- 用此图片来判断是什么类型的订单（酒店、线路、景点） -->
						<!-- <navigator url="hotelorder"> -->
						<image src="../../../../static/images/user/hoehtimgaes.png"></image>
						<view class="examineId">我是标题</view>
					</view>
					<view class="examineZt">待审核</view>
				</view>
				<view class="imgHead">
					<image src="../../../../static/images/bannergy.jpg"></image>
					<view class="imgheadOrder">
						<view>下单时间：</view>
						<view>数量：</view>
						<view>总价：</view>
					</view>
				</view>
				<view class="waitForsh">
					<view>取消订单</view>
					<view>催单</view>
					<view>重新提交</view>
				</view>
			</view>
			<!-- 待付款 -->
			<view class="orderExamine">
				<view class="examineDai">
					<view class="mineImg">
						<!-- 用此图片来判断是什么类型的订单（酒店、线路、景点） -->
						<image src="../../../../static/images/user/hoehtimgaes.png"></image>
						<view class="examineId">我是标题</view>
					</view>
					<view class="examineZt">待付款</view>
				</view>
				<view class="imgHead">
					<image src="../../../../static/images/bannergy.jpg"></image>
					<view class="imgheadOrder">
						<view>下单时间：</view>
						<view>数量：</view>
						<view>总价：</view>
					</view>
				</view>
				<view class="waitForsh">
					<view>取消订单</view>
					<view>去付款</view>
				</view>
			</view>
			<!-- 出团 -->
			<view class="orderExamine">
				<view class="examineDai">
					<view class="mineImg">
						<!-- 用此图片来判断是什么类型的订单（酒店、线路、景点） -->
						<image src="../../../../static/images/user/hoehtimgaes.png"></image>
						<view class="examineId">我是标题</view>
					</view>
					<view class="examineZt">待出团</view>
				</view>
				<view class="imgHead">
					<image src="../../../../static/images/bannergy.jpg"></image>
					<view class="imgheadOrder">
						<view>下单时间：</view>
						<view>数量：</view>
						<view>总价：</view>
					</view>
				</view>
				<view class="waitForsh">
					<view>申请退款</view>
					<view>出团</view>
				</view>
			</view>
			<!-- 回团 -->
			<view class="orderExamine">
				<view class="examineDai">
					<view class="mineImg">
						<!-- 用此图片来判断是什么类型的订单（酒店、线路、景点） -->
						<image src="../../../../static/images/user/hoehtimgaes.png"></image>
						<view class="examineId">我是标题</view>
					</view>
					<view class="examineZt">待回团</view>
				</view>
				<view class="imgHead">
					<image src="../../../../static/images/bannergy.jpg"></image>
					<view class="imgheadOrder">
						<view>下单时间：</view>
						<view>数量：</view>
						<view>总价：</view>
					</view>
				</view>
				<view class="waitForsh">
					<view>申请退款</view>
					<view>回团</view>
				</view>
			</view>
			<!-- 退款 -->
			<view class="orderExamine">
				<view class="examineDai">
					<view class="mineImg">
						<!-- 用此图片来判断是什么类型的订单（酒店、线路、景点） -->
						<image src="../../../../static/images/user/hoehtimgaes.png"></image>
						<view class="examineId">我是标题</view>
					</view>
					<view class="examineZt">退款中</view>
				</view>
				<view class="imgHead">
					<image src="../../../../static/images/bannergy.jpg"></image>
					<view class="imgheadOrder">
						<view>下单时间：</view>
						<view>数量：</view>
						<view>总价：</view>
					</view>
				</view>
				<view class="waitForsh">
					<view>撤销退款</view>
				</view>
			</view>
			<!-- 退款完成 -->
			<view class="orderExamine">
				<view class="examineDai">
					<view class="mineImg">
						<!-- 用此图片来判断是什么类型的订单（酒店、线路、景点） -->
						<image src="../../../../static/images/user/hoehtimgaes.png"></image>
						<view class="examineId">我是标题</view>
					</view>
					<view class="examineZt">退款完成</view>
				</view>
				<view class="imgHead">
					<image src="../../../../static/images/bannergy.jpg"></image>
					<view class="imgheadOrder">
						<view>下单时间：</view>
						<view>数量：</view>
						<view>总价：</view>
					</view>
				</view>
			</view>
			<!-- 已完成 -->
			<view class="orderExamine">
				<view class="examineDai">
					<view class="mineImg">
						<!-- 用此图片来判断是什么类型的订单（酒店、线路、景点） -->
						<image src="../../../../static/images/user/hoehtimgaes.png"></image>
						<view class="examineId">我是标题</view>
					</view>
					<view class="examineZt">已完成</view>
				</view>
				<view class="imgHead">
					<image src="../../../../static/images/bannergy.jpg"></image>
					<view class="imgheadOrder">
						<view>下单时间：</view>
						<view>数量：</view>
						<view>总价：</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import slFilter from '@/components/sl-filter/sl-filter.vue';
	export default{
		components: {
		    slFilter
		},
		data(){
			return{
				headerPosition:"fixed",
				headerTop:"0px",
				themeColor: '#ff4800',
				titleColor:'#333',
			    filterResult: '',
				menuList:[
					{
					'title': '默认排序',
					'key': 'sads',
					'isMutiple': false,
					'detailList': [{
					            'title': '默认排序',
					            'value': ''
					        },
					        {
					            'title': '未审核',
					            'value': ' '
					        },
					        {
					            'title': '重新提交',
					            'value': ' '
					        },
					        {
					            'title': '催单',
					            'value': ' '
					        }
					    ]
					},
					{
					'title': '新单',
					'detailTitle': '请选择级别类型（可多选）',
					'isMutiple': true,
					'key': 'jobType',
					'detailList': [{
			                    'title': '最近新增',
			                    'value': ''
			                },
							{
							    'title': '最近出团',
							    'value': ' '
							},
			                {
			                    'title': '已出团',
			                    'value': ' '
			                },
			                {
			                    'title': '已回团',
			                    'value': ' '
			                }
			            ]
			        },
					{
			            'title': '未完成',
			            'key': 'salary',
			            'isMutiple': true,
			            'detailTitle': '请选择价格范围（可多选）',
			            'detailList': [{
			                    'title': '不限',
			                    'value': ''
			                },
			                {
			                    'title': '待付款',
			                    'value': ' '
			                },
			                {
			                    'title': '申请退款',
			                    'value': ' '
			                },
			               
			            ]
				
			        },
					 {
					    'title': '已完成',
					    'key': 'sort',
					    'isSort': true,
					    'detailList': [{
					            'title': '默认排序',
					            'value': ''
					        } 
					    ]
					}
				]
			}
		},
		onLoad(option){
			//兼容H5下排序栏位置
			// #ifdef H5
				let Timer = setInterval(()=>{
					let uniHead = document.getElementsByTagName('uni-page-head');
					if(uniHead.length>0){
						this.headerTop = uniHead[0].offsetHeight+'px';
						clearInterval(Timer);//清除定时器
					}
				},1);
			// #endif
		},
		methods:{
			nalixt(){
				uni.navigateTo({
					url:'hotelorder'
				})
			}
		}
		
	}
</script>

<style>
	page{
		background: #f6f6f6;
	}
	.ticketlrer{
		width: 100%;
		z-index: 99;
	}
	/* 待审核 */
	.orderList{
		width: 100%;
		margin-top: 118upx;
		margin-bottom: 88upx;
	}
	.orderExamine{
		padding: 15upx 3%;
		width: 90%;
		margin: 0 auto;
		background: #fff;
		border-radius: 20upx;
		margin-top: 24upx;
	}
	.examineDai{
		width: 100%;
		display: flex;
		justify-content: space-between;
		padding: 18upx 0;
		border-bottom: 1upx solid #d3d3d3;
	}
	.examineDai image{
		width: 40upx;
		height: 40upx;
		border-radius: 50%;
		margin-right: 10upx;
	}
	.examineDai view{
		line-height: 1.2;
	}
	.mineImg{
		width: 75%;
		display: flex;
	}
	.examineId{
		font-size: 32upx;
		color: #333;
		width: 90%;
		font-weight: bold;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.examineZt{
		width: 25%;
		font-size: 30upx;
		text-align: right;
		color: #13b1eb;
	}
	.imgHead image{
		width: 120upx;
		height: 120upx;
		border-radius: 10upx;
		margin-right: 15upx;
	}
	.imgheadOrder view{
		line-height: 1.4;
		font-size: 30upx;
		color: #555;
	}
	.imgHead{
		display: flex;
		margin: 18upx 0;
	}
	.waitForsh view{
		width: 28%;
		height: 65upx;
		line-height: 62upx;
		font-size: 30upx;
		border-radius: 50upx;
		border: 0;
		text-align: center;
		border: 1upx solid #a4a4a4;
		color: #888;
		margin-left: 20upx;
		margin-top: 15upx;
	}
	.waitForsh{
		display: flex;
		justify-content: flex-end;
		flex-wrap:wrap;
	}
	
	/* 没有订单 */
	.oneNoorder image{
		width: 130upx;
		height: 130upx;
		border-radius: 50%;
		margin-top: 100upx;
	}
	.oneNoorder view{
		font-size: 32upx; 
		color: #555;
	}
	.oneNoorder{
		width: 100%;
		text-align: center;
	}
</style>
